// !#1 引入 React 核心包
// import React from 'react'
// !#2 负责渲染的包（虚拟 DOM 转真实 DOM 并渲染）
import ReactDOM from 'react-dom/client'

// !#3 创建一个虚拟 DOM
/* let wrapEle
const isLoading = false
if (isLoading) {
  wrapEle = <div>加载中...</div>
} else {
  wrapEle = <div>加载完毕！</div>
} */

/* const isLoading = () => {
  let wrapEle
  const isLoading = false
  if (isLoading) {
    wrapEle = <div>加载中...</div>
  } else {
    wrapEle = <div>加载完毕！</div>
  }
  return wrapEle
}

const wrapEle = isLoading() */

const isLoading = () => {
  const isLoading = false
  return <div>{isLoading ? '加载中...' : '加载完毕！'}</div>
}

const wrapEle = isLoading()

// !#4 把虚拟 DOM 渲染到页面
// 渲染到哪儿、渲染谁
ReactDOM.createRoot(document.querySelector('#root')).render(wrapEle)
